<template>
  <div class="Login">
      <el-card class="box-card" shadow="never">
        <div class="text-center">
          <h2 style="color: #409EFF;">Thunder - OA</h2>
          <h4 class="logo-title">统一授权登录中心</h4>
        </div>
        <div v-if="loginType == 'password'">
          <el-form ref="form" class="login-form" :model="form" label-position="top">
            <div class="demo-input-suffix">
              <el-form-item label="员工账号">
                <el-input type="text" v-model="form.account" size="small" autocomplete="off" placeholder="请输入员工账号" />
              </el-form-item>
              <el-form-item label="安全密码">
                <el-input type="password" v-model="form.password" size="small" autocomplete="off" :clearable="true" placeholder="请输入登录密码" />
              </el-form-item>
              <el-row style="margin-top: 12px;">
                <el-col :span="18">
                  <el-checkbox v-model="radio" size="mini" true-label="1" :label="agreement">{{agreement}}</el-checkbox>
                </el-col>
                <el-col :span="6" class="text-right" style="padding-top: 5px;">
                  <el-link type="info" :underline="false" href="/auth/retrieve">找回密码</el-link>
                </el-col>
              </el-row>
            </div>
            <div class="btn">
            <el-button type="primary" class="btn-block" size="mini" @click="goLogin" round>登录系统</el-button>
          </div>
          </el-form>
        </div>
        <div v-else>
          <div class="text-center">
            <div id="login-code"></div>
            <h6 class="text-center" style="margin-top: -10px;" @click="toPassword">返回密码登录</h6>
          </div>
        </div>
        <div v-if="thirdParty.length > 0 && loginType == 'password'">
          <div class="third-party">
            <el-divider>第三方授权登录</el-divider>
            <el-row justify="center" class="text-center">
              <el-col :span="24/thirdParty.length" v-for="(item,index) in thirdParty" :key="index">
                <el-button circle :class="item.icon" @click="getThirdParty(item.type)"></el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-card>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/display.css'
export default {
  name: "Login",
  data() {
    return {
      title: "统一授权登录中心",
      loginType: 'password',
      agreement: '我同意并遵守《用户隐私政策》',
      thirdParty: [
        {
          name: '企业微信',
          icon: 'iconfont icon-qiyeweixin',
          type: 'WeChat'
        },
        {
          name: '阿里钉钉',
          icon: 'iconfont icon-dingding',
          type: 'DingTalk'
        }
      ],
      radio: '1',
      form: {
        account: '',
        password: ''
      }
    };
  },
  methods: {
    getThirdParty(index)
    {
      if(this.radio != 1) {
        ElMessage({
          message: '请先勾选遵守隐私协议说明',
          type: 'warning',
        })
      } else {
        if(index == 'WeChat') {
          return this.getWeChat();
        } else {
          return this.getDingTalk();
        }
      }
    },
    getWeChat()
    {
      this.loginType = 'wechat';
      // 动态引入企业微信js文件
      const s = document.createElement('script')
      s.type = 'text/javascript'
      s.src = '//rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js'
      const wxElement = document.body.appendChild(s)
      // 调用企业微信二维码方法
      wxElement.onload = function () {
          window.WwLogin({
              id: 'login-code', // 需要显示的容器id
              appid: 'ww46a8f62b1cc0e4e7', // 公众号appid wx*******
              agentid: '1000002', // 公众号agentid wx*******
              scope: 'snsapi_login', // 网页默认即可
              redirect_uri: encodeURIComponent('oa.stgeek.cn'), // 授权成功后回调的url，需要在企业微信配置，我的方法是回调到自己的weChatBack页面
              state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
              style: 'black', // 提供"black"、"white"可选。二维码的样式
              href: '' // 外部css文件url，需要https
          })
      }
    },
    getDingTalk()
    {
      sessionStorage.setItem('hasLogin',false);
      this.loginType = 'dingtalk';
      var url = encodeURIComponent('http://localhost.me/index.php?test=1&aa=2')
      var goto = encodeURIComponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoa9y0wuajszlqswfjo&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+url)
      this.$nextTick(() => {
        var obj = this.DingTalk({ // eslint-disable-line no-unused-vars
          id:"login-code",//这里需要你在自己的页面定义一个HTML标签并设置id，例如<div id="login_container"></div>或<span id="login_container"></span>
          goto: encodeURIComponent(goto), //请参考注释里的方式
          style: "border:none;background-color:#FFFFFF;text-align: center;",
          width : "100%",
        });
      })
    },
    toPassword()
    {
      this.loginType = 'password';
    },
    goLogin()
    {
      if(this.radio != 1) {
        ElMessage({
          message: '请先勾选遵守隐私协议说明',
          type: 'warning',
        })
      } else {
        ElMessage({
          message: '登录操作',
          type: 'warning',
        })
        sessionStorage.setItem('hasLogin',true);
        window.location.href = '/index'
      }
    },
    DingTalk(a) { // eslint-disable-line no-unused-vars
      var e, c = document.createElement("iframe"),
      d = "https://login.dingtalk.com/login/qrcode.htm?goto=" + a.goto ;
      d += a.style ? "&style=" + encodeURIComponent(a.style) : "",
      d += a.href ? "&href=" + a.href : "",
      c.src = d,
      c.frameBorder = "0",
      c.allowTransparency = "true",
      c.scrolling = "no",
      c.width =  a.width ? a.width + 'px' : "365px",
      c.height = a.height ? a.height + 'px' : "400px",
      e = document.getElementById(a.id),
      e.innerHTML = "",
      e.appendChild(c)
    }
  }
  // components: {
  //   HelloWorld
  // }
};
</script>

<style lang="scss">
.Login {
  padding: 20px 10px 40px;
  margin-top: 100px;
}
.box-card {
    width: calc(100vw * 0.2);
    min-width: 350px;
    margin: 20px auto;
}
.login-form {
  padding: 15px;
}
.btn {
  text-align: center;
  padding: 10px 20px 0 20px;
}
.btn-block {
  width: 100%;
}
.el-form-item label {
  margin-bottom: -15px;
  font-size: 12px;
}
.el-form-item {
  margin-bottom: 0px;
}
.third-party-btn {
  margin: 0 20px;
}
.third-party .el-divider {
  margin-bottom: 30px;
}
.logo-title {
  margin-top: -10px;
}
.impowerBox .title {
  display: none;
}
</style>